<template>
    <div class="trigger-action" v-loading="loading">
        <div class="trigger-action-application">
            <i class="trigger-action-application-icon iconfont" :class="state.currentNodeInfoFront.options.appLogo" v-if="state.currentNodeInfoFront.options.appLogo ? state.currentNodeInfoFront.options.appLogo.includes('icon') : ''"></i>
            <img class="trigger-action-application-icon iconfont" :src="state.currentNodeInfoFront.options.appLogo" v-else-if="state.currentNodeInfoFront.options.appLogo" />
			<div class="trigger-action-application-icon iconfont" v-else>
				<i>{{ state.currentNodeInfoFront.options.appName ? state.currentNodeInfoFront.options.appName.substring(0, 2) : '' }}</i>
			</div>
            <div class="trigger-action-application-right">
                <div class="trigger-action-application-name">
                    {{ state.currentNodeInfoFront.options.appName }}
                </div>
                <div class="trigger-action-application-info">
                    触发对象：{{ state.currentNodeInfoFront.options.selectObjName }}
                </div>
            </div>
        </div>
        <div class="trigger-action-method">
            <div class="trigger-action-method-title">
                触发方式：{{ selectedLabel }}
            </div>
            <el-button type="text" @click="changeMethod">更改</el-button>
            <el-select v-model="state.executeWay.way" ref="select">
                <el-option v-for="option in methodsList" :key="option.way" :label="option.name"
                    :value="option.way">
                </el-option>
            </el-select>
        </div>
        <div class="trigger-action-content">
            <EventTrigger v-if="state.executeWay.way === 'event' && Object.keys(eventOptions).length" :options="eventOptions"/>
            <Webhook v-else-if="state.executeWay.way === 'webhook' && Object.keys(webhookOptions).length" :options="webhookOptions"/>
            <TimingTrigger v-else-if="state.executeWay.way === 'timer' && Object.keys(timerOptions).length" :options="timerOptions"/>
            <OverTimeTrigger v-else-if="state.executeWay.way === 'timeOutPlus' && Object.keys(timeOutPlusOptions).length" :options="timeOutPlusOptions"/>
        </div>
    </div>
</template>

<script>
import { getExecuteWayConfigList } from '@src/modules/trigger/api/trigger.js'

import EventTrigger from './components/EventTrigger';
import OverTimeTrigger from './components/OverTimeTrigger'
import TimingTrigger from './components/TimingTrigger';
import Webhook from './components/Webhook';

import state from '@src/modules/trigger/view/setting/util/state.js'

export default {
    name: 'TriggerAction',
    components: {
        EventTrigger,
        OverTimeTrigger,
        TimingTrigger,
        Webhook,
    },
    watch: {
        'state.executeWay.way': function(n, o) {
            state.currentTriggerInfo.triggerWayName = this.selectedLabel;
            state.currentTriggerInfo.eventWayInfo = [];
            state.executeWay.options = {};
        }
    },
    created() {
        this.loading = true;
        const params = {
            apiId: state.currentNodeInfoFront.options.apiId,
        }
        if (state.currentTriggerInfo.triggerId) {
            params.triggerId = state.currentTriggerInfo.triggerId;
        }
        getExecuteWayConfigList(params).then(res => {
            this.methodsList = res.data;
            res.data.forEach(i => {
                if (i.way === 'event') {
                    this.eventOptions = i.options;
                } else if (i.way === 'webhook') {
                    this.webhookOptions = i.options;
                    this.webhookOptions.paramTemplate = JSON.stringify(this.webhookOptions.paramTemplate, null, '\t');
                } else if (i.way === 'timer') {
                    this.timerOptions = i.options;
                } else if (i.way === 'timeOutPlus') {
                    this.timeOutPlusOptions = i.options;
                }
            })
            // 如果当前选中触发方式在触发方式列表中不存在，默认选中第一个触发方式
            if (!(res?.data || []).some(i => i.way === state.executeWay.way)) {
                state.executeWay.way = res.data[0].way;
                state.currentTriggerInfo.triggerWayName = res.data[0].name;
            }
            state.currentTriggerInfo.triggerWayName = this.selectedLabel;
        }).finally(() => {
            this.loading = false;
        })
        this.appConfig = state.selectApp;
    },
    computed: {
        selectedLabel() {
            const selectedOption = this.methodsList.find(option => option.way === state.executeWay.way);
            return selectedOption ? selectedOption.name : '';
        },
        state() {
            return state;
        },
    },
    data() {
        return {
            appConfig: {
                icon: '',
                name: '',
                info: '',
            },
            selectedActionList: [],
            methodsList: [],
            eventOptions: {},
            webhookOptions: {},
            timerOptions: {},
            timeOutPlusOptions: {},
            loading: false,
        }
    },
    methods: {
        changeMethod() {
            this.$refs.select.visible = !this.$refs.select.visible;
        },
    },
}
</script>

<style scoped lang="scss">
.trigger-action {
    height: calc(100% - 72px);
    overflow: hidden;
    padding: 16px 24px 0;

    .trigger-action-application {
        display: flex;
        align-items: center;
        padding: 8px 0;

        .trigger-action-application-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            font-size: 24px;
            background: var(--color-primary-light-1);
            color: var(--color-primary-light-6);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 8px;
            i {
                font-size: 12px;
                font-style: normal;
            }
        }

        .trigger-action-application-right {
            .trigger-action-application-name {
                font-size: 14px;
            }

            .trigger-action-application-info {
                font-size: 12px;
                color: #8c8c8c;
            }
        }
    }

    .trigger-action-method {
        display: flex;

        &-title {
            line-height: 34px;
            margin-right: 8px;
            font-weight: 500;
            font-size: 14px;
        }

        ::v-deep .el-select {
            visibility: hidden;
            width: 0;
            position: relative;
            right: 40px;
        }
    }

    .trigger-action-content {
        height: calc(100% - 90px);
        overflow: auto;
    }
}
</style>